<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>火调知识图谱 - 火灾调查知识库平台</title>
    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- Element Plus -->
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
    <script src="https://unpkg.com/vue@3"></script>
    <script src="https://unpkg.com/element-plus"></script>
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <!-- ECharts -->
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.6.0/dist/echarts.min.js"></script>
    <style>
        .el-menu-demo {
            background-color: #1e40af !important;
        }
        .el-menu--horizontal > .el-menu-item {
            color: white !important;
        }
        .el-menu--horizontal > .el-menu-item:hover {
            background-color: #2563eb !important;
        }
        #graphContainer {
            width: 100%;
            height: 600px;
        }
    </style>
</head>
<body class="bg-gray-50">
    <div id="app">
        <!-- 顶部导航栏 -->
        <div class="shadow-md">
            <div class="container mx-auto">
                <el-menu mode="horizontal" class="el-menu-demo" :ellipsis="false">
                    <el-menu-item class="!px-4">
                        <img src="https://via.placeholder.com/40x40" alt="Logo" class="h-8">
                    </el-menu-item>
                    <el-menu-item index="1">
                        <i class="fas fa-search mr-1"></i> 检索
                    </el-menu-item>
                    <el-menu-item index="2">
                        <i class="fas fa-project-diagram mr-1"></i> 火调知识图谱
                    </el-menu-item>
                    <el-menu-item index="3">
                        <i class="fas fa-robot mr-1"></i> AI检索功能
                    </el-menu-item>
                    <el-menu-item index="4">
                        <i class="fas fa-file-alt mr-1"></i> 火调报告生成
                    </el-menu-item>
                    <el-menu-item index="5">
                        <i class="fas fa-tachometer-alt mr-1"></i> 火调大模型驾驶舱
                    </el-menu-item>
                </el-menu>
            </div>
        </div>

        <!-- 主要内容区域 -->
        <div class="container mx-auto mt-8 px-4">
            <!-- 工具栏 -->
            <div class="bg-white rounded-lg shadow-md p-4 mb-6">
                <div class="flex items-center gap-4">
                    <el-button-group>
                        <el-button type="primary">
                            <i class="fas fa-expand-arrows-alt mr-1"></i> 展开
                        </el-button>
                        <el-button type="primary">
                            <i class="fas fa-route mr-1"></i> 路径分析
                        </el-button>
                        <el-button type="primary">
                            <i class="fas fa-project-diagram mr-1"></i> 拓扑分析
                        </el-button>
                    </el-button-group>
                    <el-select v-model="graphTemplate" placeholder="选择图谱模板" style="width: 200px">
                        <el-option label="火灾处置流程" value="fire_process"></el-option>
                        <el-option label="消防设备关系" value="equipment_relation"></el-option>
                        <el-option label="火灾原因分析" value="cause_analysis"></el-option>
                    </el-select>
                    <el-button type="success">
                        <i class="fas fa-save mr-1"></i> 保存当前视图
                    </el-button>
                </div>
            </div>

            <div class="grid grid-cols-4 gap-6">
                <!-- 左侧面板 -->
                <div class="col-span-1">
                    <div class="bg-white rounded-lg shadow-md p-4 mb-6">
                        <h3 class="text-lg font-semibold mb-4">实体类型</h3>
                        <el-tree
                            :data="entityTypes"
                            show-checkbox
                            node-key="id"
                            default-expand-all>
                        </el-tree>
                    </div>
                    <div class="bg-white rounded-lg shadow-md p-4">
                        <h3 class="text-lg font-semibold mb-4">关系类型</h3>
                        <el-tree
                            :data="relationTypes"
                            show-checkbox
                            node-key="id"
                            default-expand-all>
                        </el-tree>
                    </div>
                </div>

                <!-- 右侧知识图谱展示 -->
                <div class="col-span-3">
                    <div class="bg-white rounded-lg shadow-md p-4">
                        <div id="graphContainer"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        const { createApp, ref, onMounted } = Vue

        createApp({
            setup() {
                const graphTemplate = ref('')
                const entityTypes = ref([
                    {
                        id: 1,
                        label: '火灾类型',
                        children: [
                            { id: 11, label: '电气火灾' },
                            { id: 12, label: '化学品火灾' },
                            { id: 13, label: '建筑火灾' }
                        ]
                    },
                    {
                        id: 2,
                        label: '消防设备',
                        children: [
                            { id: 21, label: '灭火器' },
                            { id: 22, label: '消防栓' },
                            { id: 23, label: '烟感器' }
                        ]
                    }
                ])

                const relationTypes = ref([
                    {
                        id: 1,
                        label: '因果关系',
                        children: [
                            { id: 11, label: '导致' },
                            { id: 12, label: '影响' }
                        ]
                    },
                    {
                        id: 2,
                        label: '空间关系',
                        children: [
                            { id: 21, label: '位于' },
                            { id: 22, label: '邻近' }
                        ]
                    }
                ])

                onMounted(() => {
                    const myChart = echarts.init(document.getElementById('graphContainer'))
                    
                    // 示例数据
                    const option = {
                        title: {
                            text: '火灾知识图谱'
                        },
                        tooltip: {},
                        animationDurationUpdate: 1500,
                        animationEasingUpdate: 'quinticInOut',
                        series: [{
                            type: 'graph',
                            layout: 'force',
                            symbolSize: 50,
                            roam: true,
                            label: {
                                show: true
                            },
                            edgeSymbol: ['circle', 'arrow'],
                            edgeSymbolSize: [4, 10],
                            edgeLabel: {
                                fontSize: 12
                            },
                            data: [{
                                name: '电气火灾',
                                category: 0,
                            }, {
                                name: '短路',
                                category: 1,
                            }, {
                                name: '过载',
                                category: 1,
                            }],
                            links: [{
                                source: '短路',
                                target: '电气火灾',
                                value: '导致'
                            }, {
                                source: '过载',
                                target: '电气火灾',
                                value: '导致'
                            }],
                            categories: [{
                                name: '火灾类型'
                            }, {
                                name: '原因'
                            }],
                            force: {
                                repulsion: 2500,
                                edgeLength: [100, 200]
                            }
                        }]
                    }
                    
                    myChart.setOption(option)
                })

                return {
                    graphTemplate,
                    entityTypes,
                    relationTypes
                }
            }
        }).use(ElementPlus).mount('#app')
    </script>
</body>
</html> 